<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin:0;
        }

        #wrap{
            width:260px;
            height: 50vh;
            margin:20vh auto;
            border:1px solid #000;
            overflow: hidden;
        }

        #list{
            margin: 0;
            padding: 10px 5px;
            list-style: none;
            font: 16px/2 "宋体";
        }

        #list li{
            border-bottom: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <ul id="list">

        </ul>
    </div>


    <script>
        {
            let list=document.querySelector("#list");
            list.innerHTML=[...(".".repeat(100))].map((item,index)=>`
                <li>这是第${index}个li</li>
            `).join("")
        }
    </script>
      
    <script>
          {
            let list=document.querySelector("#list");
            let startPoint=0;   //按下鼠标的位置
            let startEl=0;      //按下时元素的位置
            let y=0;
            let move=(e)=>{
                let nowPoint=e.clientY;
                y=startEl+(nowPoint-startPoint);
                list.style.transform=`translate3d(0,${y}px,0)`
            };
            list.addEventListener("mousedown",(e)=>{
                startPoint=e.c.clientY;
                startEl=y;
                document.addEventListener("mousemove",move);
            //    使用document是为了不止在元素内起作用，在外面的空白处也可以进行拖拽

            })

        }
    </script>
</body>
</html>